<template>
  <el-container direction="vertical">
    <el-header height="">
      <!-- Header content -->
      <a href="#" title="CodeEdu">
        <img class="logo" src="~/assets/img/logo-long.png" lt="CodeEdu" />
      </a>
    </el-header>
    <el-container direction="horizontal">
      <el-container direction="vertical">
        <el-main height="">
          <el-card shadow="always" :body-style="{ padding: '2px' }">
            <!-- card body -->
            <nuxt />
          </el-card>
        </el-main>
      </el-container>
      <el-aside class="video-list" width="300px">
        <!-- Aside content -->
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <div slot="header">
            <span>课程大纲</span>
          </div>
          <!-- card body -->
          <div class="lh-menu-wrap">
            <menu id="lh-menu" class="lh-menu mt10 mr10">
              <ul>
                <!-- 文件目录 遍历章节和小节 -->
                <li
                  class="lh-menu-stair"
                  v-for="chapter in chapterVideoList"
                  :key="chapter.id"
                >
                  <a
                    href="javascript: void(0)"
                    :title="chapter.title"
                    class="current-1"
                  >
                    <em class="lh-menu-i-1 icon18 mr10"></em>{{ chapter.title }}
                  </a>

                  <ol class="lh-menu-ol" style="display: block">
                    <li
                      class="lh-menu-second ml30"
                      v-for="video in chapter.children"
                      :key="video.id"
                    >
                      <nuxt-link
                        :to="{
                          name: 'player-vid',
                          params: {
                            vid: video.videoSourceId,
                          },
                          query: {
                            courseId: courseWebVo.id,
                          },
                        }"
                      >
                        <span class="fr">
                          <i class="el-icon-video-play">开始播放</i>
                        </span>
                        <em class="lh-menu-i-2 icon16 mr5">&nbsp;</em
                        >{{ video.title }}
                      </nuxt-link>
                    </li>
                  </ol>
                </li>
              </ul>
            </menu>
          </div>
        </el-card>
      </el-aside>
    </el-container>
  </el-container>

  <!-- <div class="guli-player">
    <div class="head">
    </div>
    <div class="body">
      <div class="content"><nuxt /></div>
    </div>
  </div> -->
</template>
<script>
import courseApi from "@/api/course";
import cookie from "js-cookie";
export default {
  data() {
    return {
      loginInfo: {
        id: "",
        age: "",
        avatar: "",
        mobile: "",
        nickname: "",
        sex: "",
      },
      courseInfo: {},
      courseWebVo: {},
      chapterVideoList: [],
      ischoice: false,
      courseId: "",
    };
  },
  created() {
    this.courseId = this.$route.query.courseId;
    this.initCourseInfo();
  },
  methods: {
    initCourseInfo() {
      //从cookie获取用户信息
      var userStr = cookie.get("dhu_ucenter");
      // 把字符串转换json对象(js对象)
      if (userStr) {
        this.loginInfo = JSON.parse(userStr);
      }
      console.log("loginInfo:" + this.loginInfo);
      courseApi.getCourseInfo(this.courseId).then((response) => {
        console.log(response.data.data);
        (this.courseWebVo = response.data.data.courseWebVo),
          (this.chapterVideoList = response.data.data.chapterVideoList),
          (this.ischoice = response.data.data.isChoice);
        console.log("debug" + this.ischoice);
      });
    },
  },
};
</script>

<style>
html,
body {
  height: 100%;
}
</style>

<style lang="less" scoped>
.el-container {
  margin: 0 20px;
}

.content {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.video-list {
  padding: 20px 0;
}

.el-icon-video-play:hover {
  color: @theme-color;
}
</style>
